<template>
    <TheElDialog
        title="批量审核二次确认"
        minWidth
        v-on="$listeners"
        v-bind="$attrs"
        :visible.sync="multiplePassVisible"
    >
        <div style="font-size: 16px;line-height: 1.2em;margin-bottom: 10px;font-weight: 500;">
            你确定审核下面单据吗？
        </div>
        <div style="font-size: 14px;line-height: 1.2em;margin-bottom: 20px;">
            审核通过单据将不可修改和删除！
        </div>
        <el-button v-show="!showMore" @click="showMore = !showMore" type="text">查看单据</el-button>
        <el-table
            v-show="showMore"
            :data="multipleSelection"
            border
            style="width: 100%"
            :summary-method="getSummaries"
            show-summary
        >
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="documentNo" label="单据编号" sortable></el-table-column>
            <el-table-column prop="documentDate" label="单据日期" sortable>
                <template v-slot="{row}">
                    {{ row.documentDate | formatDateFillStr }}
                </template>
            </el-table-column>
            <el-table-column prop="depot" label="仓库" sortable>
                <template v-slot="{row}">
                    {{ row.depotInfo && row.depotInfo.name }}
                </template>
            </el-table-column>
            <el-table-column prop="customer" label="客户" sortable>
                <template v-slot="{row}">
                    {{ row.customerInfo && row.customerInfo.name }}
                </template>
            </el-table-column>
            <el-table-column prop="account" label="账户名称" sortable>
                <template v-slot="{row}">
                    {{ row.accountInfo && row.accountInfo.name }}
                </template>
            </el-table-column>
            <el-table-column prop="total" label="单据金额" sortable>
                <template v-slot="{row}">
                    {{ row.total | keep2decimalPlaces }}
                </template>
            </el-table-column>
        </el-table>
        <el-form style="margin-top: 24px;" ref="form" :model="form" :rules="rules" label-width="50px">
            <el-form-item label="审核" prop="passStatus">
                <el-radio-group v-model="form.passStatus">
                    <el-radio label="1">确认审核</el-radio>
                    <el-radio label="0">取消审核</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="备注" prop="desc">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button :disabled="isMultipleLoading" @click="multiplePassVisible = false">取 消</el-button>
            <el-button :loading="isMultipleLoading" type="danger" @click="onClickOk('form', multipleSelection)"
                >确 定</el-button
            >
        </span>
    </TheElDialog>
</template>
<script>
import {validatString} from './getRules';
export default {
    name: 'PassDialog',
    props: {
        visible: {type: Boolean, default: false, required: true},
        multipleSelection: {type: Array, required: true, default: () => []},
        getSummaries: {type: Function, required: true, default: () => () => {}},
        putApisList: {type: Function, required: true, default: () => () => {}}
    },
    data() {
        return {
            showMore: false,
            rules: {
                passStatus: [{required: true, message: '审核类型必填项', trigger: ['change', 'blur']}],
                desc: [
                    {required: true, message: '备注必填项'},
                    {validator: validatString(200), trigger: ['change', 'blur']}
                ]
            },
            form: {
                passStatus: '',
                desc: ''
            },
            isMultipleLoading: false
        };
    },
    computed: {
        multiplePassVisible: {
            get() {
                return this.visible;
            },
            set(val) {
                this.$emit('update:visible', val);
            }
        }
    },
    watch: {
        visible: {
            handler(val) {
                this.form = {
                    passStatus: '',
                    desc: ''
                };
            }
        }
    },
    methods: {
        onClickOk(formName, multipleSelection) {
            this.$refs[formName].validate(async (valid, fields) => {
                if (!valid) {
                    return;
                }
                console.log(multipleSelection);
                if (multipleSelection.length === 0) {
                    this.$message({showClose: true, type: 'error', message: '数据为空，批量修改失败'});
                    return;
                }
                multipleSelection = multipleSelection.map(item => {
                    const meta = item.meta || {};

                    meta.passStatus = this.form.passStatus;

                    const passHistory = meta.passHistory || [];

                    passHistory.push({passStatus: meta.passStatus, desc: this.form.desc, date: Date.now()});

                    meta.passHistory = passHistory;

                    return {...item, meta: meta};
                });
                try {
                    this.isMultipleLoading = true;
                    this.putApisList(multipleSelection, {type: 'PassDialog'})
                        .then(res => {
                            this.multipleAddVisible = false;
                            this.$message({showClose: true, type: 'success', message: '批量修改成功'});
                            this.$emit('on-ok', true);
                            this.multiplePassVisible = false;
                        })
                        .catch(error => {
                            const data = error.response && error.response.data;
                            if (data && data.error) {
                                this.$message({showClose: true, type: 'error', message: data.error});
                            } else {
                                this.$message({showClose: true, type: 'error', message: '批量修改失败'});
                            }
                            console.error(error);
                        })
                        .finally(() => {
                            this.isMultipleLoading = false;
                        });
                } catch (error) {
                    console.warn('表单的校验失败');
                    this.$message({showClose: true, type: 'warn', message: '表单的校验失败'});
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped></style>
